<template>
    <a-table :columns="columns" :data-source="students"
             :row-key="rowkey" :pagination="pagination"
             @change="tableChange"
    ></a-table>
</template>

<script setup lang="ts">
import axios from "axios";
import {ref, computed} from "vue";
import {usePagination, useRequest} from "vue-request";
import {AxiosRespList, AxiosRespPage, Student, StudentQueryDto} from "../model/Model8080";
import {PaginationProps} from "ant-design-vue";


const dto = ref({page: 1, size: 5});

const {data, total, run} = usePagination<AxiosRespPage<Student>, StudentQueryDto[]>(
    (d) => axios.get('/api/students/q', {params: d}), {
        defaultParams: [dto.value],
        pagination: {
            currentKey: "page",
            pageSizeKey: "size",
            totalKey: "data.data.total"
        }
    }
);

const pagination = computed<PaginationProps>(() => {
    return {
        current: dto.value.page,
        pageSize: dto.value.size,
        total: total.value,
        showSizeChanger: true,
        pageSizeOptions: ["1", "5", "10", "20"]
    }
});

function tableChange(pagination: PaginationProps) {
    console.log(pagination);
    dto.value.page = pagination.current ?? 1
    dto.value.size = pagination.pageSize ?? 2
    run(dto.value)
}

// const {data} = useRequest<AxiosRespList<Student>>(() => axios.get('/api/students'));
console.log(data)
const students = computed(() => {
    return data.value?.data.data.list || []
});

function rowkey(r: Student) {
    return r.id
}

const columns = ref([{title: '编号', dataIndex: 'id'}, {title: '姓名', dataIndex: 'name'}
    , {title: '性别', dataIndex: 'sex'}, {title: '年龄', dataIndex: 'age'}]);

</script>
<style scoped>

</style>
